<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <style type="text/css">
            * {
                margin:0;
                padding:0;
            }

            html {
                height:100%;
            }

            body {
                min-height:100%;
                box-sizing: border-box;
                background:
                        radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
                        radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
                        radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
                        radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
                        radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
                        radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
                        linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
                background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
                background-color: #840b2a;
            }
            .login-container{
                position: absolute;
                width: 30%;
                left: 35%;
                top: 35%;
            }
            .login-container>.header{
                color: #ffffff;
                background-color: rgba(255, 130, 19, 0.9);
                padding: 20px;
                border-bottom: 1px solid #ff8213;
                border-radius: 5px 5px 0 0;
            }
            .login-container>.body{
                background-color: rgba(255, 255, 255, 0.9);
                padding: 20px;
                border-radius: 0 0 5px 5px;
            }
            .login-container>.body .form-item [type=text], .login-container>.body .form-item [type=password]{
                color: #aaaaaa;
                font-weight: bold;
                display: inline-block;
                border: 1px solid rgba(255, 130, 19, 0.9);
                border-radius: 5px;
                padding: 10px;
                font-size: 16px;
                margin: 10px 0;
            }
            .login-container>.body .form-item [type=text] .active, .login-container>.body .form-item [type=password] .active{
                border: 1px dashed rgba(219, 79, 70, 0.9);
            }
            .login-container>.body .form-submit input[type=submit]{
                display: inline-block;
                width: 100%;
                padding: 10px 20px;
                color: #ffffff;
                background-color: rgba(255, 130, 19, 0.9);
                cursor: pointer;
                border: 0;
                border-radius: 5px;
                font-size: 16px;
                margin-top: 20px;
            }
            .login-container>.body .form-submit input[type=submit]:focus,
            .login-container>.body .form-submit input[type=submit]:hover{
                background-color: #ff8213;
            }
            .body table td{
                padding-left: 10px;
            }
            .hyc-nav{
                background-color: rgba(0, 0, 0, 0.5);
            }
            .hyc-nav img{
                height: 60px;
            }
            .hyc-nav>.title{
                color: #ffffff;
                display: inline-block;
                position: relative;
                top: -25px;
            }
            .msg{
                position: absolute;
                background-color: rgba(0, 0, 0, 0.6);
                color: rgba(255, 255, 255, 0.9);
                font-size: 16px;
                width: 20%;
                left: 40%;
                padding: 10px 20px;
                display: none;
                border: 0;
                border-radius: 5px;
                bottom: 0;
                transition: all .5s ease-in-out;
            }
            .msg.active{
                display: block;
                bottom: 60px;
            }
        </style>
    </head>
    <body>
        <div class="hyc-nav">
            <img src="/image/huiyunche-logo.gif">
            <h3 class="title">慧运车管理平台</h3>
        </div>
        <div class="login-container">
            <div class="header">
                <h3>管理员登录</h3>
            </div>
            <div class="body">
                <form action="/login/submit" method="post">
                    <div style="text-align: center;">
                        <table border="0" style="display: inline-table;">
                            <tr class="form-item">
                                <th>用户名</th>
                                <td>
                                    <input name="username" id="id_username" placeholder="请输入用户名" type="text" required="required">
                                </td>
                            </tr>
                            <tr class="form-item">
                                <th>密码</th>
                                <td>
                                    <input name="password" id="id_password" placeholder="请输入密码" type="password" required="required">
                                </td>
                            </tr>
                            <tr class="form-submit">
                                <td colspan="2">
                                    <input type="submit" value="登录">
                                </td>
                            </tr>
                        </table>
                    </div>
                </form>
            </div>
        </div>
        <div class="msg" id="logo_msg"></div>
        <script type="text/javascript">
            var msg = document.getElementById('logo_msg');
            // 回车键监听
            document.onkeydown = function(event) {
                if (event.keyCode == 13) {
                    submitForm();
                }
            };

            // 提交
            function submitForm() {
                document.getElementById('submit_btn').submit();
            };

        </script>
    </body>
</html>